<template>
    <div class="page">
        <!-- 导航栏 -->
        <div class="navBar">
            <customNavBar :leftTetx=leftTetx :titleTest=titleTest></customNavBar>
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <!-- 页面头部 -->
            <div class="contentTop">
                <!-- 条件输入 -->
                <div class="input">
                    <!-- 搜索框 -->
                    <van-search class="searchView" placeholder="请输入客户姓名" v-model="customName" :show-action="showAction" reverse-color
                        @search="onSearch" @cancel="onCancel" @focus="onFocus" />
                        <div class='searchButton' @click="onSearch">搜索</div>
                    <!-- 下拉选择框 -->
                    <van-dropdown-menu class="dropdownMenu">
                        <van-dropdown-item v-model="dateInterval" :options="dropdownMenuList"  @change="onSearch"/>
                    </van-dropdown-menu>
                </div>
            </div>
            <!-- 列表页 -->
            <div class="listView">
                <van-list class="vanList" v-model:loading="loading" :finished="finished"
                    finished-text="没有更多了" @load="onLoad">
                    <van-cell class="cells" v-for="v in listDataCompleted" :key="v">
                        <div class="card" v-if="v.taskStatusType == 2">
                            <div style="padding-left:12px;">
                                <div class="labels labels1"  style=" width: 90vw; padding-top: 10px;">
                                    任务状态:
                                    <!-- <span class="textContent">{{taskStatusFromat(v.taskStatus)  || '1'  }}</span> -->
                                    <span class="textContent">{{ "进行中" }}</span>
                                </div>
                                <div class='cardT'>
                                    <div class="labels">
                                        <div>客户姓名:</div>
                                        <span class="textContent">{{ v.monManName || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>邀请时间:</div>
                                        <span class="textContent">{{ v.createTime || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>任务编号:</div>
                                        <span class="textContent">{{ v.taskCode || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>任务备注:</div>
                                        <!-- <input class="labelsInput" disabled v-model="v.remark" maxlength="20" type="text" placeholder=""> -->
                                        <span class="textContent">{{v?.remark }}</span>
                                    </div>
                                    <div class="labels labelsButt" style="padding-bottom: 10px;">
                                    <span class="labelsButton" @click.stop="getUpdateTaskRemark(v)">编辑备注</span>
                                        <span class="labelsButton" @click.stop="inviteAgainClick(v)">再次邀请</span>
                                    </div>
                                </div>
                            </div>
                            <div @click.stop="goinviteCode(v)">
                                <van-image style="position: absolute; top: 5%; right: 1.7%;" width="22" height="22"
                                    :src="cod" />
                            </div>
                        </div>
                        <div class="card" v-else-if="v.taskStatusType == 3">
                            <div style="padding-left:12px;">
                                <div class="labels labels1" style="width: 90vw; padding-top: 10px;">
                                    任务状态:
                                    <!-- <span class="textContent">{{taskStatusFromat(v.taskStatus)|| '1'  }}</span> -->
                                    <span class="textContent">{{ "失败" }}</span>
                                </div>
                                <div class='cardT'> 
                                    <div class="labels">
                                        <div>客户姓名:</div>
                                        <span class="textContent">{{ v.monManName || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>邀请时间:</div>
                                        <span class="textContent">{{ v.createTime || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>任务编号:</div>
                                        <span class="textContent">{{ v.taskCode || '1'  }}</span>
                                    </div>
                                    <div class="labels">
                                        <div>任务备注:</div>
                                        <!-- <input class="labelsInput" disabled v-model="v.remark" maxlength="20" type="text" placeholder=""> -->
                                        <span class="textContent">{{v?.remark }}</span>
                                    </div>
                                    <div class="labels labelsButt" style="padding-bottom: 10px;">
                                        <!-- <span class="labelsButton" @click.stop="detAgainClick(v)">删除</span> -->
                                    <span class="labelsButton" @click.stop="getUpdateTaskRemark(v)">编辑备注</span>
                                        <span class="labelsButton" @click.stop="inviteAgainClick(v)">再次邀请</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card" v-else>
                            <div
                                style=" width:2px; background-color: #198AFA; border-radius: 12px 0px 0px 12px; margin-top: 6px; margin-bottom: 6px; ">
                            </div>
                            <div style="padding-left:12px;">
                                <div class="labels labels1" style="width: 90vw; padding-top: 10px;">
                                    任务状态:
                                    <span class="textContent">{{ "已完成" }}</span>
                                </div>
                                <div class="labels" style="width: 80vw; padding-top: 10px;">
                                    <div>客户姓名:</div>
                                    <span class="textContent">{{ v.monManName || '1' }}</span>
                                </div>
                                <div class="labels">
                                    <div>邀请时间:</div>
                                    <span class="textContent">{{ v.createTime || '1' }}</span>
                                </div>
                                <div class="labels">
                                    <div>任务编号:</div>
                                    <span class="textContent">{{ v.taskCode || '1' }}</span>
                                </div>
                                <div class="labels">
                                    <div>任务备注:</div>
                                    <!-- <input class="labelsInput" disabled v-model="v.remark" maxlength="20" type="text" placeholder=""> -->
                                    <span class="textContent">{{v?.remark }}</span>
                                </div>
                                <div class="labels labelsButt" style="padding-bottom: 10px;">
                                    <!-- <span class="labelsButton" @click.stop="detAgainClick(v)">删除</span> -->
                                    <span class="labelsButton" @click.stop="getUpdateTaskRemark(v)">编辑备注</span>
                                    <span class="labelsButton" @click.stop="inviteAgainClick(v)">再次邀请</span>
                                </div>
                            </div>
                            <div style="position: relative;" @click="golistReports(v)">
                                <van-image style="position: absolute; top: 50%; transform: translate( -200%,-50%);" width="22"
                                    height="22" :src="goRightdetailedVersion" />
                            </div>
                        </div>
                    </van-cell>
                </van-list>
          </div>
        </div>
        <van-overlay :show="show">
            <div class="wrapper">
                <div class='wrapperChild'>
                    <div class='wrapperChildDiv'>
                        <!-- <input class="labelsInput" v-model="remarkInputValue"  maxlength="20" type="text" placeholder="您可以在此处输入备注信息">-->
                        <textarea v-model="remarkInputValue" maxlength="80" placeholder="您可以在此处输入备注信息"  rows="3"></textarea>
                        <div class='wrapperChildBottom'>
                            <div @click="wrapperUpdateTaskRemarkqx()">取消</div>
                            <div @click="wrapperUpdateTaskRemark()">确定</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script lang="ts" setup name="taskseach">
import { showDialog } from 'vant'
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { ref, reactive} from 'vue'
import { useRouter, useRoute } from "vue-router"
import { selMyTaskAllDetail, updateTaskRemark, deleteTask } from "/@/api/auth/task"
import { taskStatusFromat} from '/@/utils/taskFormat'
import { dropdownMenuList, listDataCompleted, ListFormdataz } from '../Task/ts/task'
import { sm2 } from 'sm-crypto';
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import cod from "../../assets/img/features/cod.png"
import goRightdetailedVersion from "../../assets/img/features/rightRound.png"
import { json } from 'stream/consumers';


//公钥串---加密使用
const publicKey = ref<string>("044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be")
//私钥串---解密使用
const privateKey = ref<string>("5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea")
// 加密方法
const JIAMIPublicData=(data):string=> {
    const cipherMode = 1;
    const result = sm2.doEncrypt(data, publicKey.value,cipherMode);
    return `04${result}`;
}
// 解密方法
const JIMIPublicData=(data:any):string=> {
    const cipherMode = 1;
    //data为加密的数据
    const result = sm2.doDecrypt(data.substring(2), privateKey.value,cipherMode)
    return result;
}
const show = ref<boolean>(false)
const remarkInputValue = ref('');
const taskCodeValue = ref('')
const leftTetx = ref<string>("")
const titleTest = ref<string>("任务搜索")
const router = useRouter()
const route = useRoute()
const showAction = ref<boolean>(false)
const dropdownMenuList = ref<dropdownMenuList[]>(
    [
        { text: '全部时间', value: '' },
        { text: '近1周', value: '1' },
        { text: '近1个月', value: '2' },
        { text: '近3个月', value: '3'},
        { text: '近半年', value: '4' },
        { text: '近1年', value: '5' },
        { text: '近2年', value: '6' },
    ]
)
const listDataCompleted = ref([])
const customName = ref<string>('')
const dateInterval = ref<string>('')// 替换字符
if(route.query){
    customName.value = (route.query.customName as string)
    dateInterval.value =  (route.query.dateInterval as string)
}
const replaceAll = (str, find, replace) => {
  return str.replace(new RegExp(find, 'g'), replace);
}
// 二维码
const goinviteCode = (v:any) => {
    router.push({ path: '/inviteCode', query: { expirationTime: v.reportValidTerm, longUrl: v.qrCodeUrl, shortUrl: v.shortLink } })
}
// 报告列表
const golistReports = (v:any) => {
    router.push({ path: '/listReports', query: { taskCode: JIAMIPublicData(v.taskCode) } })
}
// 出发修改备注弹框
const getUpdateTaskRemark = (v:any)=>{
    show.value = true
    remarkInputValue.value = v.remark
    taskCodeValue.value = v.taskCode
}
// 修改备注
const wrapperUpdateTaskRemark = () => {
    updateTaskRemark({
        remark: remarkInputValue.value,
        taskCode: JIAMIPublicData(taskCodeValue.value)
    }).then((res: any) => {
        if(res.code == 200) {
            Toast(res.msg)
            getList()
        }
        show.value = false
    })
}
// 修改备注取消
const wrapperUpdateTaskRemarkqx = () => {
    show.value = false
    remarkInputValue.value = ''
}
// 用户列表
const getList = ():void => {
    let a = ''
    if(customName.value){
        a = JIAMIPublicData(customName.value)
    } else {
        a = ''
    }
    var data:ListFormdataz = {
        customName: a,
        dateInterval: dateInterval.value
    }
    selMyTaskAllDetail(data).then((res: any) => {
        finished.value = true;
        loading.value = false;
        if(res.code == 200) {
            listDataCompleted.value =  res.data
            listDataCompleted?.value.map ((v)=>{
              (v.createTime as string) = replaceAll((v.createTime as string), "T", " ");
                (v.taskCode as string) = JIMIPublicData((v.taskCode as string));
            })
        }
    })
}
// 删除
const detAgainClick = (v:any) => {
    showDialog({
        message: '您确定删除吗。',
        confirmButtonText:  "好的",
        cancelButtonText:  "取消",
        showConfirmButton: true,
        showCancelButton: true,
    }).then(() => {
        deleteTask({
            taskCode: JIAMIPublicData(v.taskCode)
        }).then((res: any) => {
            if(res.code == 200) {
                Toast(res.msg)
                getList()
            }
        })
    })
    .catch(() => {
        
    });
}
// 再次邀请
const inviteAgainClick = (v:any) => {
    router.push({ path: '/addingCustomersz', query: { taskCode: JIAMIPublicData(v.taskCode) as string } })
}
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);



onMounted(async () => {
    getList()
});

// 判断屏幕尺寸显示
const htmlWidth = ref(document.documentElement.clientWidth || document.body.clientWidth) 

const onSearch = ():void => {
    if(dateInterval.value || customName.value){
        getList()
    } else {
        if(htmlWidth.value >670){
            Toast("请输入查询内容")
            return 
        }
        router.go(-1)
    }
};

const onFocus = (val: any) => {

};

const onCancel = (val: any) => {

};
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
textarea {
            width: calc( 100% - 40px); /* 宽度可以根据需要调整 */
            padding: 10px; /* 内边距 */
            margin: 20px;
            margin-bottom: 0px;
            border-radius: 4px;
            box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
        }
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .wrapperChild {
        width: 80%;
        // height: 170px;
        height: auto;
        border-radius: 10px;
        background: #F5F7FA;
        display: flex;
        align-items: center;
        justify-content: center;
        .wrapperChildDiv {
            width: 100%;
            .labelsInput {
                width: 70%;
                height: 30px;
                font-size: 13px;
                margin-top: 30px;
            }
            .wrapperChildBottom {
                width: 100%;
                display: flex;
                margin-top: 20px;
                align-items: center;
                justify-content: center;
                margin-bottom: 20px;
                div {
                    font-size: 13px;
                    color: #F5F7FA;
                    padding: 7px 30px;
                    border-radius: 3px;
                    background: #2B8AE9;
                }
                div:nth-child(1){
                    margin-left: 10px;
                }
                div:last-child{
                    margin-left: 30px;
                }
            }
        }
    }
}
.page {
    background-color: #3296FA;
    height: 100vh;
    width: 100vw;
    padding-top: 60px;


    .navBar {
        width: 100%;
			position: fixed;
			height: 60px;
			justify-content: center;
			background-color: #3296FA;
			margin-top: -60px;

        :deep(.van-nav-bar__title) {
            color: white;
        }

        :deep(.van-icon) {
            color: white;
        }
    }

    .content {
        height: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        padding-top: 10px;
        .contentTop {
            width: 100%;
            background-color: #3296FA;

            .input {
                display: flex;
                align-items: center;
                width: 100%;
                padding: 10px;
                padding-bottom: 0px;
                box-sizing: border-box;
                .searchButton {
                    font-size: 15px;
                    color: #F5F7FA;
                    padding:0 10px;
                }
                .searchView {
                    width: 53%;
                    border-radius: 5px;
                    border: 0.5px solid rgba(255, 255, 255, 0.5);
                    height: 30px;
                    background-color: #2B8AE9;
                    color: white;
                    :deep(.van-search) {
                        padding: 0px;
                        color: white;
                    }

                    :deep(.van-field__control){
                        color:white
                    }

                    :deep(.van-icon-search:before) {
                        color: white;
                    }
                    :deep(#van-search-1-input) {
                        font-size: 14px;
                    }
                    :deep(.van-search__content) {
                        top: -5px;
                        height: 23px;
                        color: white;
                        padding-left: 0;
                        position: relative;
                        background-color: transparent;
                    }
                }

                .dropdownMenu {
                    width: 30%;
                    height: 30px;
                    padding-left: 10px;
                    border-radius: 10px;
                    :deep(.van-dropdown-menu){
                        position: relative;
                    }
                    :deep(.van-dropdown-menu__bar){
                        z-index: 1;
                        position: relative;
                    }
                    :deep(.van-ellipsis) {
                        color: white;
                    }

                    :deep(.van-dropdown-menu__bar) {
                        background-color: #2B8AE9;
                        height: 30px;
                        border-radius: 5px;
                        border: 0.5px solid rgba(255, 255, 255, 0.5);
                    }
                }

            }


            .tabs {
                width: 100%;

                :deep(.van-tab) {
                    background-color: #3296FA;
                    color: white;
                }

                :deep(.van-tab--active) {
                    color: white;
                }
            }
        }


        .listView {
            width: 100%;
            margin-top: 10px;
            padding-top: 10px;
            overflow-y: scroll;
            box-sizing: border-box;
            height: calc(100% - 37px);
            background-color: #F5F7FA;
            border-radius: 12px 12px 0px 0px;

            .vanList {
                margin-bottom: 20px;
                // background-color: rgba(250, 250, 250, 1);

                :deep(.van-cell:after) {
                    border: none;
                }

                .cells {
                    padding: 0;
                    width: 94%;
                    margin: 0 auto;
                    margin-top: 10px;
                    // margin-left: 13px;
                    border-radius: 7px;
                    .card {
                        width: 100%;
                        display: flex;
                        text-align: left;
                        background-color: white;
                        .cardT {
                            width: 100%;
                            // height: 100px;
                            margin: 0 auto;
                            margin-top: 10px;
                            border-radius: 7px;
                            // padding-left: 13px;
                            margin-bottom: 17px;
                            background: #F8F9FA;
                        }
                        .labels1{
                            opacity: 1;
                            font-size: 14px!important;
                            font-weight: bold!important;
                            color: rgba(0, 0, 0, 1)!important;
                        }
                        .labels {
                            display: flex;
                            font-size: 12px;
                            color: #868686;
                            padding-top: 7px;
                            div {
                                width: 70px;
                                text-align: right;
                            }
                            .labelsInput {
                                margin-left: 3px;
                                background: transparent;
                                width: calc(100% - 70px);
                            }
                            .textContent {
                                font-weight: 500;
                                margin-left: 10px;
                                font-size: 12px!important;
                                color: rgba(34, 34, 34, 1);
                            }
                        }
                        .labelsButt {
                            width: 97%;
                            justify-content: end;
                            .labelsButton {
                                display: block;
                                color: #F5F7FA;
                                margin-left: 10px;
                                padding: 7px 13px;
                                border-radius: 3px;
                                background: #3296FA;
                            } 
                        }




                        // .typeName {
                        //     padding-top: 20px;
                        //     padding-bottom: 10px;
                        //     // 核心功能
                        //     display: flex;
                        //     align-items: center;
                        //     width: 100%;

                        //     .reportType {
                        //         width: 50%;
                        //     }

                        //     .customerName {
                        //         width: 50%;
                        //     }
                        // }
                    }
                }
            }



        }

    }
}
</style>


<!-- 

    1、任务统计页面展示的是该从业人员发起的所有有效保单检视任务数据。包括通过h5页面发起和接口发起两个形式创建的检视任务。按已完成、进行中、失败三个维度展示任务数据。已完成的任务不展示任务流程节点，进行中和失败的任务展示任务流程节点。
    2、任务流程节点即任务状态，进行中的任务状态包括已创建、已查看告知页、已授权认证、已确认保单范围、生成报告中状态的任务。
    失败维度包括：未查看告知页、未授权/身份认证、未选择保单范围、无有效保单、报告生成失败状态的任务。失败维度中的未查看告知页、未授权/身份认证、未选择保单范围三种状态是指，在邀请二维码/链接超过7天有效期后，任务还停留在以上三种状态，则计为任务失败。终止状态是指在后台进行终止操作的任务状态 。
    3、任务统计列表按邀请时间倒序排列。每页展示20个任务，通过上滑加载的方式加载20个数据。
    4、搜索：根据客户姓名搜索任务，精确查询，点击“搜索”后，展示查询到的任务，如未查询到任务，页面提示：根据输入的关键字，未查询到任务信息。
    5、任务邀请时间即任务链接生成时间。
    6、按邀请时间下拉选项查询时，查询结果列表按邀请时间倒序排列。
    任务编号生成规则：保单登记机构编码6位+长日期（yymmddHHMMSS年月日时分秒12）+4位流水号.
 -->
